<template>
  <div>
    <Layout>
      <Header></Header>
      <Navbar></Navbar>
      <Content :style="{ padding: '0 50px' }">
        <Card>
          <div class="cardBody" style="min-height: 60.9vh">
            <ul>
              <li class="li-ani" @mouseenter="fadeExpand">
                <router-link to="/design">
                  <!-- pink  #81f7f3 #f3f781 #a9f5d0 -->
                  <div class="small" style="background: pink">
                    <span class="font">图片设计</span>
                    <Icon type="ios-brush-outline" class="ico-font" />
                  </div>
                </router-link>
              </li>
              <li class="li-ani" @mouseenter="fadeExpand">
                <router-link to="/theme">
                  <div class="small" style="background: #81f7f3">
                    <span class="font">主题样式</span>
                    <Icon type="ios-color-palette-outline" class="ico-font" />
                  </div>
                </router-link>
              </li>
              <li class="li-ani" @mouseenter="fadeExpand">
                <router-link to="/mine">
                  <div class="small" style="background: #f3f781">
                    <span class="font">历史记录</span>
                    <Icon type="md-timer" class="ico-font" />
                  </div>
                </router-link>
              </li>
              <li class="li-ani" @mouseenter="fadeExpand">
                <router-link to="/star">
                  <div class="small" style="background: #a9f5d0"><span class="font">本地收藏</span> <Icon type="md-star-outline" class="ico-font" /></div>
                </router-link>
              </li>
            </ul>
          </div>
        </Card>
      </Content>
      <Footer></Footer>
    </Layout>
  </div>
</template>
<script>
import $ from 'jquery'
import Header from '@/components/home/header-roll.vue'
import Footer from '@/components/home/footer.vue'
import Navbar from '@/components/home/navbar.vue'
export default {
  name: 'Home',
  data () {
    return { msg: 1 }
  },
  created () {},
  components: {
    Header,
    Footer,
    Navbar
  },
  computed: {},
  methods: {
    // 动画效果
    fadeExpand (e) {
      $(e.target)
        .stop()
        .animate(
          {
            width: '27.78vw'
          },
          800
        )
        .find('.small')
        .stop()
        .animate(
          {
            width: '27.78vw'
          },
          800
        )
        .find('.font')
        .stop()
        .fadeOut(800)
        .siblings('.ico-font')
        .stop()
        .fadeIn(800)
      $(e.target)
        .siblings('li')
        .stop()
        .animate(
          {
            width: '17.36vw'
          },
          500
        )
        .find('.small')
        .stop()
        .animate(
          {
            width: '17.36vw'
          },
          500
        )
        .find('.ico-font')
        .stop()
        .fadeOut(800)
        .siblings('.font')
        .stop()
        .fadeIn(800)
    }
  }
}
</script>
<style lang="less" scoped>
body {
  margin: 0;
  padding: 0;
}
.li-ani:first-child {
  width: 27.78vw;
  .small {
    // display: none;
    width: 27.78vw;
    .font {
      display: none;
    }
    .ico-font {
      display: inline-block;
    }
  }
}
.li-ani {
  // position: absolute;
  float: left;
  overflow: hidden;
  width: 17.36vw;
  margin-left: 2vw;
  list-style: none;
  div {
    border-radius: 10px;
  }
}
.layout {
  border: 1px solid #d7dde4;
  background: #f5f7f9;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}
// .layout-logo {
//   // width: 100px;
//   // height: 30px;
//   // background-image: './assets/WechatIMG886.png';
//   // border-radius: 3px;
//   float: left;
//   position: relative;
//   top: 1vh;
//   left: 1.4vw;
//   img {
//     height: 6.1vh;
//     width: 3.47vw;
//   }
// }
// .layout-nav {
//   width: 29.17vw;
//   margin: 0 auto;
//   margin-right: 1.39vw;
// }
// .layout-footer-center {
//   text-align: center;
//   height: 19.48vh;
//   // line-height: 9.13vh;
// }
// .ivu-menu-dark {
//   background: #faac58;
// }
// .ivu-layout-header {
//   background: #faac58;
//   padding: 0 50 px;
//   height: 64 px;
//   line-height: 64px;
// }
.ivu-card-body {
  // .cardBody {
  //   position: absolute;
  // }
  .small {
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 60.9vh;
    width: 17.36vw;
    // background-color: #81f7f3;
  }
}
.cardBody {
  height: 60.9vh;
  overflow: hidden;
}

.ico-font {
  display: none;
  vertical-align: middle;

  position: absolute;
  font-size: 17.36vw;
  color: white;
  font-weight: 1000;
  z-index: 1;
}

.font {
  // display: inline-block;
  position: absolute;
  writing-mode: vertical-lr;
  font-size: 5.56vw;
  color: white;
  font-weight: 400;
  // left: 50%;
  // margin-left: -4.17vw;
  // top: 9.74vh;
  z-index: 0;
}
// .ivu-breadcrumb > span:last-child {
//   font-weight: 700;
//   color: #999;
// }
// .ivu-breadcrumb {
//   font-weight: 700;
// }
</style>
